AsyncFunction

✒️ 2025-05-23 15:25 내용 수정

Javascript의 비동기 함수의 메소드를 제공하는 내장 객체로, Function의 서브 클래스

참고 자료 : mdn web docs async function, mdn web docs AsyncFunction

• Javascript의 모든 비동기 함수(async function)는 AsyncFunction 이다.
• 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환한다.
  • Promise는 Promise 참고.
• async 함수는 항상 Promise 객체를 반환하고, 명시적인 Promise 값이 아니더라도 암시적으로 Promise로 감싸서 반환한다.

async function fnName(parameter) {
	// 함수 내용
	await otherFn(); // await 식
}

• await는 async 함수의 실행을 일시 중지하고 전달된 Promise의 해결을 기다린 후, async 함수를 다시 실행한 후 완료 값을 반환한다.
  • Promise 객체의 then(), catch() 메서드를 사용하여 결과를 처리하던 방법을 async function과 await 키워드로 Promise를 처리할 수 있다.
  • 단어 그대로 기다리라는 의미로 작동한다.
  • await가 포함된 함수에 async가 없다면 에러가 발생하므로, 꼭 async를 작성해야 한다.

// Promise 객체를 반환하는 함수 생성
function fetchData(success = true) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			if (success) {
				resolve("데이터 가져오기 성공!");
			} else {
				reject("데이터 가져오기 실패");
			}
		}, 2000); // 2초 후에 실행
	});
}

// Promise의 then() / catch() 사용 시
fetchData(true)
	.then((result) => {
		console.log("성공:", result);
	})
	.catch((error) => {
		console.log("에러:", error);
	});

// async function으로 사용 시
// 비동기 함수 설정
async function fetchTest() {
	try {
		const result = await fetchData(true); // success = true
		console.log("Success : ", result);
	} catch (error) {
		console.error("Error : ", error);
	}
}

// 데이터 처리 시작
fetchTest();

setTimeout

참고 자료 : mdn web docs setTimeout

• 특정 시간 후 함수나 지정된 코드를 실행하는 타이머를 설정한다.
• setTimeout()은 비동기 함수로, 함수 스택의 다른 함수 호출을 막지 않는다.
• setTimeout()은 양의 정수이고 타이머를 식별할 수 있는 timeoutID를 반환하며, 이를 clearTimeout()에 전달하여 타임아웃을 취소할 수 있다.

setTimeout(code);
setTimeout(code, delay);
setTimeout(function(), delay);

// 1초 뒤에 동작
const timer = setTimeout(function() {}, 1000);

// 타이머 취소
clearTimeout(timer);

• 아래 예시는 3초 뒤에 "딜레이 종료"라는 문구를 콘솔에 출력한다.

console.log('3초 딜레이')
const countdonwn = setTimeout(function() {
    console.log('딜레이 종료');
}, 3000);

setInterval

참고 자료 : mdn web docs setInterval

• 각 호출 사이에 고정된 시간 지연으로 함수라 코드를 반복적으로 수행한다.
• setInterval()은 고유하게 식별할 수 있는 interval ID를 반환하기 때문에 나중에 clearInterval() 함수를 호출하여 제거할 수 있다.

setInterval(code);
setInterval(codd, delay);
setInterval(function(), delay);

// 1초 간격으로 반복
const timer = setInterval(function() {}, 1000);

// 반복 취소
clearInterval(timer);

• 아래 예시는 5부터 0까지 숫자를 출력한다.

let count = 5;

const countDown = setInterval(()=>{
    console.log(count);
    if (count > 0) {
        count--;
    } else {
        clearInterval(countDown);
    }
}, 1000);